<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ImageCo</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script type="text/javascript">
      $("input:submit").click(function()
     {
      $.get("operation.php", { type: "John", hegith: "2pm", wdith: "2pm", quality: "2pm"},
   function(data){
     alert("Data Loaded: " + data);
     $('#thepic').attr('src',data);
   });   
     })
</script>
</head>
<body>
    <div style="width:700px;margin:0 auto 0 auto;">
        <img id="thepic" src="" height="200" width="700"/> 
</div>
<!--Upper Div-->
<form action="" method="get" enctype="multipart/form-data">
<div id="upper-div">
<input style="margin-top:15px;" name="pic" id="pic" type="file"/>
</div>
<!--نوع الصوره -->
<div id="left-div">
<h1 style=" font-family: Tahoma, Geneva, sans-serif; margin-left:15px; width:230px; float:left;color:#FFF;">Image Type</h1>
<div style="margin-top:50px;"  align="center">
<input name="type" style="margin-left:50px;" type="radio" value="jpg"/>JPG
<input name="type" type="radio" style="margin-left:50px;" value="png"/>png
<input style="margin-left:50px;" name="type" type="radio" value="bmp"/>bmp
<input name="type" type="radio" style="margin-left:50px;" value="gif"/>gif
</div>
<!--ابعاد الصوره -->
<h1  style="float:left; clear:left; margin-left:15px; font-family: Tahoma, Geneva, sans-serif;width:230px; color:#FFF;">Image Size</h1>
<div style="margin-top:50px;"  align="center">
<label style=" font-family: Tahoma, Geneva, sans-serif;margin-left:5px; margin-top:15px; color:#FFF;">height</label><input name="hegith" type="text" size="6" maxlength="5">
<label style=" font-family: Tahoma, Geneva, sans-serif;margin-left:5px; margin-top:15px; color:#FFF;">wdith</label><input name="wdith" type="text" size="6" maxlength="5">
</div>
<!--وضوح الصوره-->
<h1 style="float:left; clear:left; margin-left:15px; font-family: Tahoma, Geneva, sans-serif; color:#FFF;">Image quality</h1>
<div style="margin-top:50px;" align="center">
<input name="quality" type="text" size="5" maxlength="4"/>

</div>
<div style="float:right">
<input style="width:250px; height:50px; background-color:#09F; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; color:#FFF;border: 3px solid #666;
margin-top:50px; margin-right:75px;"  type="submit" value="UpLoad"/>
</div>
</div>
</form>
</body>
</html>
